let navs =  [
  {id:1, name:'学前教育'},{id:2, name:'工商管理'},{id:3, name:'医院护理'},{id:4, name:'工业机器人'},
  {id:5, name:'经济管理'},{id:6, name:'IT/计算机'},{id:7, name:'软件工程'},{id:8, name:'影视专业'},
  {id:9, name:'艺术类'},{id:10, name:'会计专业'},{id:11, name:'语言法律'},{id:12, name:'机械工程'},
  {id:13, name:'教育理学'},{id:14, name:'互联网金融'}
]
let city = [
  {id:1, name:'北京'},{id:2, name:'天津'},{id:3, name:'河北'},{id:4, name:'山西'},{id:5, name:'内蒙古'},
  {id:6, name:'辽宁'},{id:7, name:'黑龙江'},{id:8, name:'吉林'},{id:9, name:'上海'},{id:10, name:'江苏'},
  {id:11, name:'浙江'},{id:12, name:'安徽'},{id:13, name:'福建'},{id:14, name:'江西'},{id:15, name:'山东'},
  {id:16, name:'河南'},{id:17, name:'湖北'},{id:1, name:'湖南'},{id:19, name:'广东'},{id:20, name:'广西'},
  {id:21, name:'海南'},{id:22, name:'重庆'},{id:23, name:'四川'},{id:24, name:'贵州'},{id:25, name:'云南'},
  {id:26, name:'西藏'},{id:27, name:'陕西'}
]
let item = {
  logo:'./static/image/school/school8.png',
  name:'广东外语外贸大学高等继续教育学院',
  ys:'“211工程”建设高校订单培养学生入学签订就业推荐协议',
  city:'北京'
}
/* 通用布局 */
Vue.component('layout', {
  template: `
    <div class="main-layout" :class="{ 'main-layout-nohead': !header}">
      <div v-if="header" id="header" class="common-header">
        <div class="flex-bect top paddLR">
          <a href="./index.html" class="logo"><img src="./static/image/logo.png" alt=""></a>
          <div class="mid">专业方案/选校一站式服务</div>
          <div class="ico-ph flex-rict"><img src="./static/image/ico-ph.png" alt="" class="ico">{{info.tel}}</div>
          <div class="menu" @click="open"><div><i v-for="item in 3" :key="item"></i></div></div>
        </div>
      </div>
      <slot />
      <div class="bottom-copy flex-ct bg" :style="{ backgroundColor: white ? '#fff' : '#fff' }">
        <div class="div">
          <div class="p">联系电话：<span class="sp">{{info.phone}}</span></div>
          <div class="p">版权所有：<span class="sp">{{info.company}}</span></div>
        </div>
      </div>
      <my-footer />
      <van-popup v-model="visible" position="top" class="nav">
        <div class="con">
          <span class="close" @click="visible = false"></span>
          <span class="p1">猜你喜欢</span>
          <div class="p2">我的兴趣专业</div>
          <div class="list1 flex-lect">
            <a v-for="(item, j) in navs" :key="j" href="" class="item flex-ct">{{item.name}}</a>
          </div>
          <div class="p2 p3">选择方向</div>
          <div class="list2 flex-lect">
            <a v-for="(item, j) in fx" :key="j" href="" class="item" :class="'item'+j">
              <span class="sp">{{item.name[0]}}</span>
              <p class="p">{{item.name}}</p>
            </a>
          </div>
        </div>
      </van-popup>
    </div>
  `,
  props: {
    header: {
      type: Boolean,
      default: true,
    },
    white: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      info: {},
      visible: false,
      navs:navs,
      fx:[
        {id:1, name:'初中生'},{id:2, name:'高中生'},{id:3, name:'艺术生'}
      ]
    }
  },
  components: {
    myFooter: httpVueLoader('./components/footer.vue'),
    mainMenu: httpVueLoader('./components/menu.vue')
  },
  methods: {
    open() {
      this.visible = true
      console.log('success')
    },
  },
  mounted() {
    var info = window.info()
    info.phone = info.tel.replace(/\-/g, '')
    this.info = info
  }
});


/* 通用导航吸顶 */
Vue.component('module', {
  template: `
    <div>
      <div class="ny-header study-recommend">
        <div class="bg"></div>
        <div class="menu-list">
          <ul class="menu-list-flex">
            <li 
              v-for="(item, index) in navs" 
              :key="index" 
              :data-id="'main' + (index + 1)" 
              class="li flex-ct" 
              :class="'menu-item' + index + (index === 0 ? ' active' : '')"
            >{{item}}</li>
          </ul>
        </div>
      </div>
      <div v-for="(item, index) in navs" :key="index" :id="'main' + (index + 1)" class="container">
        <slot :name="'main' + (index + 1)" :title="item" />
      </div>
    </div>
  `,
  props: ['navs'],
  mounted() {
    this.$nextTick(() => {
      var container = $('.container');
      menuScroll(container);
    })
  }
});

// 通用主副标题布局
Vue.component('school-module', {
  template: `
    <div class="school">
      <div class="box">
        <div class="home-tit flex-bect">
          <span class="nam">热招院校，高校教师，行业专家</span>
          <span class="more flex-ct" @click="show = true"><img src="./static/image/home/school-s.png" class="ico" alt="" />筛选学校</span>
        </div>
        <div class="top flex-lect">
          <span class="sp">已选:</span>
          <span class="item flex-ct" v-if="school.zyIdx > -1">{{school.zy[school.zyIdx].name}}</span>
          <span class="item flex-ct" v-if="school.cityIdx > -1">{{school.city[school.cityIdx].name}}</span>
        </div>
        
        <dl class="school-list">
          <dd v-for="(item, index) in school.list" :key="index" href="" class="item flex-le">
            <div class="logos"><img :src="item.logo" alt="" /></div>
            <div class="div flex1">
              <div class="name">{{item.name}}</div>
              <div class="flex-bect ws">
                <div class="w">
                  <div class="address"><span class="sp">地址：</span>{{item.address}}</div>
                  <div class="ys"><span class="sp">优势：</span>{{item.ys}}</div>
                </div>
                <div>
                  <a href="" class="btn btn1 flex-ct">学校详情</a>
                  <a href="" class="btn btn2 flex-ct">快速报名</a>
                </div>
              </div>
            </div>
          </dd>
        </dl>
      </div>
      <van-popup v-model="show" position="bottom" class="school-select">
        <div class="con">
          <div class="tit">请选择专业类别/学校地区 <span class="close" @click="show = false"></span></div>
          <div class="cbox">
            <div class="t">专业类别</div>
            <dl class="list list1 flex-lect">
              <dd v-for="(item, index) in school.zy" :key="index" class="item flex-lect" :class="{on: index === school.zyIdx1}" @click="school.zyIdx1 = index">{{item.name}}</dd>
            </dl>
          </div>
          <div class="cbox">
            <div class="t">学校地区</div>
            <dl class="list list2 flex-lect">
              <dd v-for="(item, index) in school.city" :key="index" class="item flex-lect" :class="{on: index === school.cityIdx1}" @click="school.cityIdx1 = index">{{item.name}}</dd>
            </dl>
          </div>
          <span class="btns flex-ct" @click="ok">选好了</span>
        </div>
              
      </van-popup>
    </div>
  `,
  props: {
    title: {
      type: String,
    },
    theme: {
      type: String,
      default: 'white'
    },
    top: {
      type: String,
      default: '70px'
    },
    bottom: {
      type: String,
      default: '70px'
    }
  },
  data(){
    return {
      show:false, // 筛选条件
      school:{
        list:[
          {logo:'./static/image/home/school-ico1.png',name:'广东外语外贸大学高等继续教育学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico2.png',name:'辽宁师范大学海华学院现代产业学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico3.png',name:'福建工程学院职业教育学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico4.png',name:'浙江农林大学继续教育学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico1.png',name:'广东外语外贸大学高等继续教育学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico2.png',name:'辽宁师范大学海华学院现代产业学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico3.png',name:'福建工程学院职业教育学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
          {logo:'./static/image/home/school-ico4.png',name:'浙江农林大学继续教育学院', address:"黑龙江省哈尔滨市", ys:'“211工程”建设高校订单培养 学生入学签订就业推荐协议'},
        ],
        zyIdx:-1, // 选中的专业
        zyIdx1:'',
        zy:navs,
        cityIdx:-1, // 选中的城市
        cityIdx1:'',
        city:city
      }
    }
  },
  methods:{
    ok(){
      this.school.zyIdx = this.school.zyIdx1;
      this.school.cityIdx = this.school.cityIdx1;
      this.show = false
    },
  }
})


/* 底部表单1 */
Vue.component('form-module', {
  template: `
    <div class="bottom-form">
      <div class="top">
        <div class="p1">填写报名表</div>
        <div class="p2">即可免费获得高考两手准备活动名额预留</div>
      </div>
      <div class="con box">
        <div class="p1">填写申请信息</div>
        <div class="p2">请您填写真实有效的信息，以便我们为您留下宝贵的入学名额</div>
        <van-form ref='form'>
          <van-field class='select' readonly v-model="form.school" name="报名院校" label="报名院校" placeholder="请选择报名院校" :rules="[{ required: true, message: '' }]" @click="show = true"></van-field>
          <van-field class='select' readonly v-model="form.zy" name="专业选择" label="专业选择" placeholder="请选择专业" :rules="[{ required: true, message: '' }]" @click="show2 = true"></van-field>
          <van-field v-model="form.name" name="学生姓名" label="学生姓名" placeholder="与身份证上一致" :rules="[{ required: true, message: '' }]"></van-field>
          <van-field class='date' readonly v-model="form.birthday" name="身份证号" label="身份证号" placeholder="请选择出生 年/月/日" :rules="[{ required: true, message: '' }]" @click="show3 = true"></van-field>
          <van-field name="学生性别" label="学生性别">
            <template #input>
              <van-radio-group v-model="form.sex" direction="horizontal">
                <van-radio :name="1">男</van-radio>
                <van-radio :name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          
          <van-field class="mobile" v-model="form.mobile" name="pattern" label="手机号码" type="tel" placeholder="请填写手机号码" :rules="[{ pattern, message: '手机号码格式不正确' }]"></van-field>
          <div style="margin: 16px;">
            <div class="flex-ct checkbox"><van-checkbox v-model="form.check" shape="square" />我已经阅读并理解<a href="" class="red">《隐私政策及授权使用协议》</a>的条款</div>
            <div class="flex-ct">
              <span class="ref" @click="onReset()">重置</span>
              <van-button round block type="info" native-type="submit" @click="onSubmit">立即报名</van-button>
            </div>
            
          </div>
        </van-form>
        <van-popup v-model="show" position="bottom">
          <van-picker  title="请选择报名院校" show-toolbar value-key="name" :columns="list" @confirm="onConfirm" @cancel="show = false" />
        </van-popup>
        <van-popup v-model="show2" position="bottom">
          <van-picker  title="请选择报名专业" show-toolbar value-key="name" :columns="zyList" @confirm="onConfirm2" @cancel="show2 = false" />
        </van-popup>
        <van-popup v-model="show3" position="bottom">
          <van-datetime-picker type="date" title="选择年月日" v-model="curDate" :min-date="minDate" @confirm="onConfirm3" @cancel="show3 = false" />
        </van-popup>
        
      </div>
    </div>
  `,
  props: {
    title: {
      type: String,
      default: ''
    },
    padding: {
      type: Array,
      default: () => [0, 0],
    },
    bottom: {
      type: Number,
      default: 0
    },
    margin: {
      type: Number,
      default: 28
    }
  },
  data() {
    return {
      form:{
        school:'',
        zy:'',
        name:'',
        carnum:'',
        sex:1,
        birthday:'',
        mobile:'',
        check:false
      },
      show:false,
      show2:false,
      show3:false,
      minDate: new Date(1970, 0, 1),
      curDate: new Date(2000, 0, 1),
      pattern: /^1\d{10}$/,
      list:[
        {name:'广东外语外贸大学高等继续教育学院',id:1},
        {name:'辽宁师范大学海华学院现代产业学院', id:2},
        {name:'福建工程学院职业教育学院', id:3},
        {name:'浙江农林大学继续教育学院', id:4},
        {name:'广东外语外贸大学高等继续教育学院', id:5},
        {name:'辽宁师范大学海华学院现代产业学院', id:6},
        {name:'福建工程学院职业教育学院', id:7},
        {name:'浙江农林大学继续教育学院', id:8},
      ],
      zyList:navs
    }
  },
  methods: {
    onReset() {
      console.log('00000000')
      this.$refs.form.resetValidation();
      this.form = {
        school:'',
        zy:'',
        name:'',
        carnum:'',
        sex:1,
        birthday:'',
        mobile:'',
        check:false
      }
    },
    onConfirm(value, index) {
      this.form.school = this.list[index].name;
      this.show = false;
    },
    onConfirm2(value, index) {
      this.form.zy = this.zyList[index].name;
      this.show2 = false;
    },
    onConfirm3(v) {
      console.log('00000000',this.timeFormat(v))
      this.form.birthday = this.timeFormat(v)
      this.show3 = false;
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      month = month < 10 ? '0'+month : month
      day = day < 10 ? '0'+day : day
      return year + '-' + month + '-' + day
    },
    
    onSubmit() {
      console.log('submit', 1);
      this.$refs.form.validate((valid)=>{
        if(valid){
          console.log('表单通过')
        }
      })
    
    },
  }
})

/* 底部表单2 */
Vue.component('form2-module', {
  template: `
    <div class="form2">
      <div class="box">
        <div class="p1">{{tit}}-帮你轻松入学</div>
        <div class="p1">有疑问<span class="sp">老师来解答</span></div>
        <van-form>
          <van-field v-model="form.name" name="学生姓名" label="学生姓名：" placeholder="" :rules="[{ required: true, message: '请填写学生姓名' }]"></van-field>
          <van-field class="mobile" v-model="form.mobile" name="pattern" label="学生电话：" type="tel" placeholder="" :rules="[{ pattern, message: '手机号码格式不正确' }]"></van-field>
           <van-field class='date' readonly v-model="form.birthday" name="出生年月" label="出生年月：" :rules="[{ required: true, message: '请选择出生年月' }]" @click="show3 = true"></van-field>
          <div class="p3">温馨提示：承诺绝不泄露您的个人信息</div>
          <van-button round block type="info" native-type="submit" class="btn" @click="onSubmit">立即抢占大学名额</van-button>
        </van-form>
      </div>
      <van-popup v-model="show3" position="bottom">
        <van-datetime-picker type="date" title="选择年月日" v-model="curDate" :min-date="minDate" @confirm="onConfirm3" @cancel="show3 = false" />
      </van-popup>
    </div>
  `,
  props: {
    tit: {
      type: String,
      default: '语言法律专业'
    },
    padding: {
      type: Array,
      default: () => [0, 0],
    },
    bottom: {
      type: Number,
      default: 0
    },
    margin: {
      type: Number,
      default: 28
    }
  },
  data() {
    return {
      minDate: new Date(1970, 0, 1),
      curDate: new Date(2000, 0, 1),
      show3:false,
      pattern: /^1\d{10}$/,
      form:{
        name:'',
        mobile:'',
        birthday:''
      }
    }
  },
  methods: {
    onSubmit() {
      if(this.form.name === '' || this.form.mobile === '' || !this.pattern.test(this.form.mobile) || this.form.birthday === '') return;
      console.log('走接口')
    },
    onConfirm3(v) {
      console.log('00000000',this.timeFormat(v))
      this.form.birthday = this.timeFormat(v)
      this.show3 = false;
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      month = month < 10 ? '0'+month : month
      day = day < 10 ? '0'+day : day
      return year + '-' + month + '-' + day
    },
  }
})
/* 底部表单2 */
// 通用主副标题布局
Vue.component('form3-module', {
  template: `
    <div class="arts-m4">
      <div class="box">
      <common-title title="热招院校，高校教师，行业专家" top="0.7" bottom="0.44"></common-title>
      <div class="form4">
          <van-form class="flex-bect">
            <van-field class='t1' readonly v-model="form.zy" label="专业类别：" @click="show1 = true"></van-field>
            <van-field class='t2' readonly v-model="form.city" label="学校地区：" @click="show2 = true"></van-field>
          </van-form>
        </div>
        <div class="list-box">
          <dl class="list">
            <dd v-for="(item, index) in m4" :key="index" class="item flex-le" :class="'item'+index">
              <img :src="item.logo" class="logos" />
              <div class="flex1 flex-bect">
                <div class="div">
                  <div class="name">{{item.name}}</div>
                  <div class="ys"><span class="sp">优势：</span>{{item.ys}}</div>
                  <div class="flex-lect">
                    <a href="javascript:void(0);" class="btn flex-ct">学校详情</a>
                    <a href="javascript:void(0);" class="btn btn2 flex-ct">快速报名</a>
                  </div>
                </div>
                <div class="city">{{item.city}}</div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <van-popup v-model="show1" position="bottom">
        <van-picker  title="专业类别" show-toolbar value-key="name" :columns="zy" @confirm="onConfirm1" @cancel="show1 = false" />
      </van-popup>
      <van-popup v-model="show2" position="bottom">
        <van-picker  title="学校地区" show-toolbar value-key="name" :columns="city" @confirm="onConfirm2" @cancel="show2 = false" />
      </van-popup>
    </div>
  `,
  props: {
    title: {
      type: String,
    },
    theme: {
      type: String,
      default: 'white'
    },
    top: {
      type: String,
      default: '70px'
    },
    bottom: {
      type: String,
      default: '70px'
    }
  },
  data(){
    return {
      show1:false,
      show2:false,
      form:{
        zy:'',
        city:'',
      },
      m4:[item,item,item,item,item,item,item,item,item,item],
      zy:navs,
      city:city,
    }
  },
  methods:{
    onConfirm1(v) {
      console.log('00000000',v.name)
      this.show1 = false;
      this.form.zy = v.name
    },
    onConfirm2(v) {
      console.log('3333',v.name)
      this.form.city = v.name
      this.show2 = false;
    },
    getShow(e){
      console.log(e, this.zy, this.city)
      this[e] = true;
    },
  }
})



// 通用主副标题布局
Vue.component('common-title', {
  template: `
    <div 
      class="common-title-wrapper" 
      :class="{ 'white-theme': theme === 'white', 'black-theme': theme !== 'white' }"
      :style="{
        paddingTop: top+'rem',
        paddingBottom: bottom+'rem',
      }"
    >
      <div class="home-tit">{{title}}</div>
      <div class="main-title-small"><slot /></div>
    </div>
  `,
  props: {
    title: {
      type: String,
    },
    theme: {
      type: String,
      default: 'white'
    },
    top: {
      type: String,
      default: '0.4'
    },
    bottom: {
      type: String,
      default: '0.4'
    }
  },
})
// 通用主副标题布局
Vue.component('common-ban', {
  template: `
    <img :src="img" class="ny-ban">
  `,
  props: {
    img: {
      type: String,
    },
  },
})
